<template>
  <tr>
    <td>
      <input
        type="checkbox"
        v-model="item.checked"
      />
    </td>
    <td>{{item.name}}</td>
    <td>{{item.price}}</td>
    <td>
      <button
        :disabled="item.num === 1"
        @click="item.num--"
      >-</button>
      <span> {{item.num}} </span>
      <button @click="item.num++">+</button>
    </td>
    <td>{{ totalPrice }}</td>
    <td>
      <button @click="delBtn(item.name)">删除</button>
    </td>
  </tr>
</template>

<script>
export default {
  // 🔔 注意：这里是传递过来一个对象，内部修改也会相应外部这个对象 (对象是引用关系哦)
  props: ["item"],
  computed: {
    totalPrice() {
      return this.item.num * this.item.price;
    }
  },
  methods: {
    delBtn(name) {
      this.$emit("del", name);
    },
  },
};
</script>

<style>
</style>